<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Barcode Scanner</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <style>
    body {
      background: #f8f8f8;
      color: #333;
    }

    #scan {
      height: 40px;
      border-radius: 3px;
      outline: none;
    border: 1px solid #ddd;
    }

    #scan>span:before {
      background-image: #fff;
      width: 0;
      height: 0;
    }
  </style>
</head>

<body>
<!-- 2018-08-16 可以用，使用拍照后识别的方式 -->

    <div id="info" hidden>
        <label id="code-type"></label>
        <input id="code-content" placeholder="输入条码或扫描获取" style="width: 200px;height: 32px;border-radius: 3px;outline: none;border: 1px solid #ddd;padding-left: 12px;margin-top: 30px;">
    
        <button id="open-url" class="smallButton" onclick='openUrl()' hidden>
          <span>Go to</span>
        </button>
        <button id="search-code" class="smallButton" onclick='searchCode()' hidden style="display: none;">
          <span>Search</span>
        </button>
      </div>
    
      <div id="toolbar">
        <button id="scan" onclick='scan()'>
          扫描
        </button>
      </div>
    
      <div id="footer">
        <a id="install" href="manifest.webapp" hidden>Install App</a>
      </div>
    
      <div id="splash"></div>
      <input type="file" id="take-picture" accept="image/*" style="z-index: -30; visibility: hidden; position: absolute; right: 0; top: 0;"
        capture>
  <script type="text/javascript" src="./zbar-main.js"></script>
  <script type="text/javascript" src="./zbar-processor.js"></script>
</body>

</html>